<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-cascades"></i>茶楼列表
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <!--  -->
            <!-- <div class="handle-box">
                <el-input v-model="query.param.userName" placeholder="用户名" class="handle-input mr10"></el-input>
                <el-input v-model="query.param.phone" placeholder="手机号" class="handle-input mr10"></el-input>
                <el-select v-model="query.param.userType" placeholder="类型" class="handle-select mr10">
                    <el-option key="1" label="前端用户" value="1"></el-option>
                    <el-option key="2" label="管理员" value="2"></el-option>
                    <el-option key="3" label="代理商" value="3"></el-option>
                </el-select>
                <el-select v-model="query.param.status" placeholder="状态" class="handle-select mr10">
                    <el-option key="1" label="正常" value="1"></el-option>
                    <el-option key="2" label="冻结" value="2"></el-option>
                </el-select>
                <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
            </div> -->
            <!-- 用户列表 -->
            <el-table 
                :data="tableData" 
                border 
                class="table" 
                ref="multipleTable" 
                header-cell-class-name="table-header" 
                @selection-change="handleSelectionChange"
            >
                <!-- <el-table-column type="selection" width="60" align="center" prop="id"></el-table-column> -->
                <el-table-column prop="id" label="ID"  align="center" width="100"></el-table-column>
                <!-- 用户名 -->
                <el-table-column prop="name" label="茶楼名称"  align="center"></el-table-column>
                <!-- 产品图片 -->
                <el-table-column label="茶楼照片" align="center" >
                    <template slot-scope="scope">
						<el-image class="table-td-thumb" :src="scope.row.logo"></el-image></template>
                </el-table-column>
                <!-- 手机号 -->
                <el-table-column prop="phone" label="联系电话"  align="center"></el-table-column>
                <el-table-column  label="地址 "  align="center">
                    <template slot-scope="scope">
                        {{scope.row.cityName}}{{scope.row.areaName}}{{scope.row.street}}
                    </template>
                </el-table-column>
                <el-table-column  label="状态 "  align="center">
                    <template slot-scope="scope">
                        <label >{{scope.row.status === 1 ? '待审核' : (scope.row.status === 2 ?'正常':(scope.row.status === 3 ?'审核失败':'冻结'))}}</label>
                    </template>
                </el-table-column>
                <!--1.待审核、2.审核成功、3.审核失败、4.冻结-->
                <el-table-column label="操作"  align="center">
				    <template slot-scope="scope">
                        <el-button type="text" @click="update(scope.row.id)">修改</el-button>
                        <el-button type="text"  @click="stateClick(scope.row)" v-if="scope.row.status == 2||scope.row.status == 4">{{scope.row.status === 2 ? '冻结' : '解冻'}} </el-button>
                        <el-button type="text" @click="inquire(scope.row.id)">查看楼层</el-button>
					</template>
                </el-table-column>
            </el-table>
			<!-- 页码功能 -->
            <div class="pagination">
                <el-pagination
                        background
                        layout="total, prev, pager, next"
                        :current-page="query.pageNum"
                        :page-size="query.pageSize"
                        :total="pageTotal"
                        @current-change="handlePageChange"
                ></el-pagination>
            </div>
        </div>
    </div>
</template>
<!-- 功能实现 -->
<script>
import { fetchData } from '../../../api';
import { userList } from '@/api/api.js';
import { userUpdate } from '@/api/api.js';
import md5 from 'js-md5';
// 富文本
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
export default {
    name: 'basetable',
    data() {
        return {
            query: {
                pageNum: 1,
                pageSize: 10,
                param: {
                    name:"",
                    phone:"",
                    status:"",
                }
            },
            pageTotal:0,
            tableData: [],
            cate:[],
            form:{}
        };
    },
    created() {
        this.tablist();
    },
    methods: {
        //茶楼列表
		tablist() {
			teaHouseList(this.query).then(res => {
                if(res.returnCode == 200){
                    this.tableData = res.data.list;
                    this.pageTotal = res.data.total;
                }else{
                    this.tableData = null;
                    this.pageTotal = 0;
                }
			})
        },
        // 修改
        update(e){
            layer.open({
                    type: 2,
                    area: ['50%', '70%'],
                    title: '茶楼修改',
                    fixed: true, //不固定
                    maxmin: true,
                    content: ['/#/teahouseUpdate?teaId=' + e]
                });
        },
        inquire(e){
            this.$router.push({
                path:'/floorList',
                query:{
                    teahouseId:e
                }
            })
        },
        //冻结功能
        stateClick(row) {
            row.status = row.status==2?4:2
            teaUpdate(row).then(res => {
                if (res.returnCode === 200) {
                    this.$message.success(row.status == 1 ? "已冻结成功" : "已解冻成功");
                    this.tablist();
                }
            }, err => {
                this.$message.error("操作失败:"+err.returnMsg)
            });
        },
        // 多选操作
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
         // 分页导航
        handlePageChange(val) {
                this.$set(this.query, 'pageNum', val);
                this.tablist();
        },
         // 触发搜索按钮
         handleSearch() {
            this.$set(this.query, 'pageNum', 1);
            this.tablist();
        }
    }
};
</script>

<!-- css样式实现 -->
<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
/* 添加的 */
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 15px;
    color: #8c939d;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
  }
  .avatar {
    width: 50px;
    height: 50px;
    display: block;
  }
  .gray{
      color:#999999;
  }
</style>
